import React from "react";
import { Picker, List } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import "./antdfix.scss";

import {bookTypesLeve} from "../../common/data/bookAllTypes";

class Test extends React.Component {
  state = {
    data: [],
    cols: 1,
    pickerValue: [],
    visible: false,
  };

  componentDidMount(){

  }

  render() {
    return (<>
      <List style={{width:"100%", height:"38px",margin:"0"}}>
        <Picker
          visible={this.state.visible}
          data={bookTypesLeve}
          value={this.state.pickerValue}
          onChange={v => this.setState({ pickerValue: v })}
          onOk={() => {
            this.setState({ visible: false });
            setTimeout(()=>{
                let {pickerValue} = this.state;
                console.log(pickerValue);

                let leve1Target = bookTypesLeve.find(item => item.value = pickerValue[0]);
                let leve2Target = leve1Target.children.find(item => item.value = pickerValue[1]);
                console.log(leve1Target,leve2Target); // --- 有问题

                // this.props.setSelectValue(leve1Target.label,leve2Target.label);
                this.props.setSelectValue([...pickerValue]);
            })
          }}
          onDismiss={() => this.setState({ visible: false })}
        >
          <List.Item onClick={() => this.setState({ visible: true })}>
              <b style={{width:"80px"}}>图书类型</b>
          </List.Item>
        </Picker>
      </List>
    </>);
  }
}

export default Test;